<style scoped>
.layout {
  background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519838182597&di=da663de8ecdde95e33c87c8ff1b02374&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2Feaf291e578bfcfb40879757c935dc6de3492af2f.jpg) no-repeat;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height:auto;
  background-size: 100%;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-footer-center {
  text-align: center;
}
</style>
<template>
    <div class="layout">
      <div v-if="login">
        <Layout>
            <Header>
                <Row style="margin:0 auto">
                        <Col style="width:75%; margin: 0 auto;float:left">
                        <Icon type="social-snapchat-outline" size="30" color="#fff"></Icon>
                        <span style="font-size:20px;color:#ffff; ">　My management system</span>
                        </Col>
                        <Col style="width:25%;float:right">
                            <Icon type="android-happy"></Icon>
                            <span style="font-size:16px;color:#fff; "> 欢迎, </span>
                            <span style="font-size:18px;color:#fff; ">{{formInline.user}}</span>
                            <span style="font-size:16px;color:#fff; ">回来！</span>
                            <Button type="error" @click="outLogin">退出登录</Button>
                        </Col>
                </Row>
            </Header>
            <Layout :style="{padding: '0 50px'}">
                <Breadcrumb :style="{margin: '16px 0'}">
                    <BreadcrumbItem>Home</BreadcrumbItem>
                    <BreadcrumbItem>Components</BreadcrumbItem>
                    <BreadcrumbItem>Layout</BreadcrumbItem>
                </Breadcrumb>
                <Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
                    <Layout>
                        <Sider hide-trigger :style="{background: '#fff'}">
                            <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                                <Submenu name="1">
                                    <template slot="title">
                                        <Icon type="ios-navigate"></Icon>
                                        功能模块
                                    </template>
                                    <MenuItem name="1-1"><router-link to="/" active-class="active" exact>用户管理</router-link></MenuItem>
                                    <MenuItem name="1-2"><router-link to="/cate" active-class="active">分类管理</router-link></MenuItem>
                                    <MenuItem name="1-3"><router-link :to="{path:'/news',query:{user: formInline.user}}" active-class="active" >新闻管理</router-link></MenuItem>
                                    <MenuItem name="1-4"><router-link to="/product" active-class="active">产品管理</router-link></MenuItem>
                                    <MenuItem name="1-5"><router-link :to="{path:'/upload',query:{user: formInline.user}}" active-class="active">上传管理</router-link></MenuItem>
                                </Submenu>
                                <Submenu name="2">
                                    <template slot="title">
                                        <Icon type="ios-keypad"></Icon>
                                        Item 2
                                    </template>
                                    <MenuItem name="2-1">Option 1</MenuItem>
                                    <MenuItem name="2-2">Option 2</MenuItem>
                                </Submenu>
                                <Submenu name="3">
                                    <template slot="title">
                                        <Icon type="ios-analytics"></Icon>
                                        Item 3
                                    </template>
                                    <MenuItem name="3-1">Option 1</MenuItem>
                                    <MenuItem name="3-2">Option 2</MenuItem>
                                </Submenu>
                            </Menu>
                        </Sider>
                        <Content :style="{padding: '0 24px', minHeight: '280px', background: '#fff'}">
                          <router-view></router-view>
                        </Content>
                    </Layout>
                </Content>
            </Layout>
            <Footer class="layout-footer-center">2018-2018 &copy; TalkingData</Footer>
        </Layout>
         </div>
        <div v-else>
              <div style="padding:331px 0">
                  <p style="color:#fff;position:absolute;font-size:30px;top:60px;left:50%;margin-left:-115px"> Welcome  to log in </p>
                  <p style="color:#fff;position:absolute;font-size:40px;top:100px;left:50%;margin-left:-25px"> My</p>
                  <p style="color:#fff;position:absolute;text-align:center;top:150px;font-size:50px;left:50%;margin-left:-215px">Management system</p>
                  <Form ref="formInline" :model="formInline" :rules="ruleInline" label-position='right' inline style="position:absolute;left:50%;top:50%;margin-top:-60px;margin-left:-90px">

                    <FormItem prop="user">
                        <Input type="text" v-model="formInline.user" placeholder="Username">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <br/>
                    <FormItem prop="password">
                        <Input type="password" v-model="formInline.password" placeholder="Password">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <br/>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formInline')" style="margin-left:55px">Login</Button>
                    </FormItem>
                </Form>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import md5 from 'crypto-js/md5';
export default {
  data() {
    return {
      isCollapsed: false,
      formInline: {
        user: "",
        password: ""
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "Please fill in the user name",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "Please fill in the password.",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "The password length cannot be less than 6 bits",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    ...mapActions(["checkLogin"]),
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$http({
            method: "post",
            url: "http://10.31.160.71:3000/users/login",
            data: {
              name: this.formInline.user,
              password: md5(this.formInline.password).toString()
            }
          }).then(res => {
            if (res.data!==null) {
              this.loginBtn_local(
                this.formInline.user,
                this.formInline.password
              );
              this.$Message.success("登录成功，请稍后。。。");
              this.checkLogin(true);
              this.get_local();
              this.$router.push("/");
            } else {
              this.$Message.error("登录失败");
            }
          });
        } else {
          this.$Message.error("输入的格式不对");
        }
      });
    },

    loginBtn_local(strName, strPass) {
      localStorage.setItem("keyName", strName);
    },
    get_local() {
      this.formInline.user = localStorage.getItem("keyName");
    },
    outLogin() {
      this.checkLogin(false);
      localStorage.removeItem("keyName");
      localStorage.removeItem("keyPass");
      this.formInline.user = "请登录";
      this.formInline.user = "";
    }
  },
  computed: {
    ...mapGetters(["login"]),
    MenuItemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  }
};
</script>
<style scoped>
.active {
  color: block;
  font-weight:700
}
</style>



